<template>
  <section class="finance-page">
    <div class="finance-page-top">
      <div class="top-left other-style">
        <div class="top">
          <div class="box">
            <div class="title">本月累计销售额（元）</div>
            <div class="num">¥{{ dataInfo.total_amount }}</div>
          </div>
          <img src="../../assets/imgs/icon/ea.png" alt="" />
        </div>
        <div class="bottom">
          <div class="item">
            <div class="title">
              <el-button type="success" link>
                <el-icon>
                  <IEpDataAnalysis />
                </el-icon>
                今日新增销售金额
              </el-button>
            </div>
            <div class="num">¥ {{ dataInfo.today_amount }} 元</div>
          </div>
          <div class="item">
            <div class="title">
              <el-button type="warning" link>
                <el-icon><IEpDataLine /></el-icon> 今日新增回款金额
              </el-button>
            </div>
            <div class="num">¥ {{ dataInfo.today_reces }} 元</div>
          </div>
          <div class="item">
            <div class="title">
              <el-button type="primary" link>
                <el-icon><IEpFolderOpened /></el-icon> 今日计划回款金额
              </el-button>
            </div>
            <div class="num">¥ {{ dataInfo.today_plans }} 元</div>
          </div>
        </div>
      </div>
      <div class="top-right other-style">
        <div id="echarts"></div>
      </div>
    </div>
    <div class="finance-page-bottom">
      <div class="top">
        <div class="table-box other-style">
          <div class="title-box">
            <h4>本月新增订单</h4>
            <el-button
              type="primary"
              @click="toPage('/finance/sale', 'month')"
              link
            >
              更多>>
            </el-button>
          </div>
          <el-table stripe :data="dataInfo.orderNew || []" :height="300" border>
            <el-table-column prop="customer_name" label="客户名称" />
            <el-table-column prop="order_no" label="订单编号" />
            <el-table-column prop="amount_total" label="订单金额" />
            <el-table-column prop="owner_name" label="业务员" />
            <el-table-column prop="order_date" label="下单日期" />
          </el-table>
        </div>
        <div class="table-box other-style">
          <div class="title-box">
            <h4>本月回款金额</h4>
            <el-button
              type="primary"
              @click="toPage('/finance/payment', 'month')"
              link
            >
              更多>>
            </el-button>
          </div>
          <el-table stripe :data="dataInfo.reces || []" :height="300" border>
            <el-table-column prop="customer_name" label="客户名称" />
            <el-table-column prop="order_no" label="订单编号" />
            <el-table-column prop="return_money" label="回款金额" />
            <el-table-column prop="owner_name" label="业务员" />
            <el-table-column prop="return_date" label="回款日期" />
          </el-table>
        </div>
      </div>
      <div style="margin-top: 20px" class="other-style">
        <div class="title-box">
          <h4>本月计划回款</h4>
          <el-button
            type="primary"
            @click="toPage('/finance/payment/plan', 'month')"
            link
          >
            更多>>
          </el-button>
        </div>
        <el-table stripe :data="dataInfo.plans || []" :height="300" border>
          <el-table-column prop="customer_name" label="客户名称" />
          <el-table-column prop="order_no" label="订单编号" />
          <el-table-column prop="real_money" label="订单金额" />
          <el-table-column prop="plan_money" label="计划金额" />
          <el-table-column prop="num" label="计划期次" />
          <el-table-column prop="return_money" label="回款账户" />
          <el-table-column prop="owner_name" label="业务员" />
          <el-table-column prop="created_at" label="日期" />
        </el-table>
      </div>
      <div style="margin-top: 20px" class="other-style">
        <div class="title-style">
          <h4>综合统计</h4>
          <div class="radio-box">
            <el-radio-group v-model="comprehensive" @change="handleClick">
              <el-radio-button label="day">日统计</el-radio-button>
              <el-radio-button label="month">月度统计</el-radio-button>
              <el-radio-button label="year">年度统计</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <el-table stripe :data="dataInfo.data || []" :height="300" border>
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="count" label="订单数" />
          <el-table-column prop="amount" label="订单金额" />
          <el-table-column prop="plans" label="销售额" />
          <el-table-column prop="reces" label="回款额" />
        </el-table>
      </div>
    </div>
  </section>
</template>
<script setup>
import * as echarts from "echarts";
import {
  contractApi,
  contractDayApi,
  contractMonthApi,
  contractYearApi,
} from "@/plugins/api/finance/sale.js";
const router = useRouter();
let dataInfo = ref({});
function getData() {
  return new Promise((resolve, reject) => {
    contractApi().then((data) => {
      dataInfo.value = data;
      resolve(data);
    });
  });
}
function getEchartsLine(dom, dataX, seriesList) {
  echarts.init(document.getElementById(dom)).dispose();
  const chart = echarts.init(document.getElementById(dom));
  const option = {
    title: {
      text: "本月收入趋势",
      left: "5%",
    },
    dataZoom: [
      //x轴滑动条
      {
        type: "slider",
        show: false,
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        bottom: "1%",
        end: dataX.length > 15 ? 50 : 100,
        height: 10,
        fillerColor: "#3E86FF",
        borderColor: "transparent",
        backgroundColor: "white", //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      show: true,
      textStyle: {
        color: "#96c0c3",
      },
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "2%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: { show: false }, //去掉保存图片设置
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dataX,
      axisLabel: {
        interval: 0,
        // rotate: 45, //X轴文字倾斜

        // color: "#cadbe3", //X轴文字颜色
        fontSize: "10", //文字大小
      },
      axisLine: {
        lineStyle: {
          color: "#293061", //X轴线颜色
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        // color: "#b7d4e3", //Y轴坐标值文字颜色
      },
      axisTick: {
        lineStyle: {
          color: "#293061", //Y轴字体颜色
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "#293061", //Y轴字体颜色
        },
      },
      splitLine: {
        //网格线
        show: true,
      },
    },

    series: seriesList,
  };
  window.addEventListener(
    "resize",
    () => {
      chart.resize();
    },
    false
  );
  chart.setOption(option);
}
let comprehensive = ref("");
function handleClick(type) {
  router.push({
    path: "/finance/index/more",
    query: {
      type: type,
    },
  });
  // if (type == "day") {
  //   contractDayApi({
  //     srch_type: "7天内",
  //   }).then((data) => {
  //     dataInfo.value.data = data.data;
  //   });
  // } else if (type == "month") {
  //   contractMonthApi().then((data) => {
  //     dataInfo.value.data = data.data;
  //   });
  // } else if (type == "year") {
  //   contractYearApi().then((data) => {
  //     dataInfo.value.data = data.data;
  //   });
  // }
}
// 跳转
function toPage(path, type) {
  let currentDate = new Date();
  let currentYear = currentDate.getFullYear();
  let currentMonth = currentDate.getMonth() + 1;
  currentMonth < 10 ? "0" + currentMonth : currentMonth;
  if (type && type == "month") {
    router.push({
      path: path,
      query: {
        date: `${currentYear}-${currentMonth}`,
      },
    });
  }
}

onMounted(() => {
  getData().then((data) => {
    getEchartsLine("echarts", data.charts.x, [
      {
        data: data.charts.total,
        type: "line",
        name: "总收入",
      },
      {
        data: data.charts.reces,
        type: "line",
        name: "回款金额",
      },
      {
        data: data.charts.plans,
        type: "line",
        name: "计划回款",
      },
    ]);
  });
});
</script>
<style scoped lang="scss">
.finance-page {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  background: #efeff0ab;
  .other-style {
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
  .finance-page-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    // border-bottom: 1px solid #50505256;
    .top-left {
      width: 30%;

      .top {
        width: 100%;
        height: 200px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #e6e2e2;
        border-radius: 20px;
        box-sizing: border-box;
        .box {
          align-self: center;
          .title {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
          }
          .num {
            font-size: 28px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
            line-height: 36px;
          }
        }
        img {
          width: 215px;
          height: 120px;
          align-self: center;
        }
      }
      .bottom {
        .item {
          display: flex;
          justify-content: space-between;
          // background: #f0eeeed2;
          height: 50px;
          padding: 5px 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #e6e2e2;
          .title {
            align-self: center;
            color: #7c7a7a;
            font-size: 14px;
          }
          .num {
            align-self: center;
            font-size: 20px;
            color: #3f3e3e;
            font-weight: 700;
          }
        }
      }
    }
    .top-right {
      width: calc(70% - 10px);
      #echarts {
        width: 100%;
        height: 350px;
      }
    }
  }
  .finance-page-bottom {
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .table-box {
        h4 {
          margin: 10px 0;
          padding: 0;
        }
        width: calc(50% - 5px);
      }
    }
    .title-style {
      display: flex;
      justify-content: space-between;
      .radio-box {
        align-self: center;
        margin-right: 20px;
      }
    }
  }
  .title-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>
